<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/602051 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="703"/>

<div>
<span><div><span style="font-size: 14pt; font-weight: bold;">设计模式：代码经验的总结</span></div><div><br clear="none"/></div><div><img src="00-笔记_files/房子2.jpg" type="image/jpeg" data-filename="房子2.jpg" style="font-size: 12pt;" width="341"/><span style="font-size: 12pt;">  </span><img src="00-笔记_files/房子3.jpg" type="image/jpeg" data-filename="房子3.jpg" style="font-size: 12pt;" width="354"/></div><div><br clear="none"/></div><div><img src="00-笔记_files/房子.jpg" type="image/jpeg" data-filename="房子.jpg" style="font-size: 12pt;" width="337"/>    <img src="00-笔记_files/房子1.jpg" type="image/jpeg" data-filename="房子1.jpg" width="339"/></div><div><br clear="none"/></div><div><br/></div><div><br/></div><div><span style="font-size: 12pt;">设计模式都是面向对象的</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br/></div><div><span style="font-size: 12pt; font-weight: bold;">工厂模式</span></div><div><br clear="none"/></div><div>    <img src="00-笔记_files/猪肉.jpg" type="image/jpeg" data-filename="猪肉.jpg" width="312"/><img src="00-笔记_files/香肠机.jpg" type="image/jpeg" data-filename="香肠机.jpg" width="239"/><img src="00-笔记_files/香肠.jpg" type="image/jpeg" data-filename="香肠.jpg" width="303"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    原料 ---&gt;  加工  ---&gt;  产品</span></div><div><span style="font-size: 12pt;">    猪肉 ---&gt;  加工  ---&gt;  香肠</span></div><div><span style="font-size: 12pt;">    this  ---&gt;  加工  ---&gt;  对象</span></div><div><span style="font-size: 12pt;">    </span></div><div><span style="font-size: 12pt;">    js中的工厂模式就是用来批量生产对象的</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    工厂函数就是做一个对象创建的封装，并将创建的对象return出去</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">function newObj(name,age){</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    var o = new Object();</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    o.name = name;</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    o.age = age;</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    return o;</span></div><div><br clear="none" style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">}</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">var obj = newObj();</span></div></div><div><br/></div><div><br/></div><div><br clear="none"/></div><div><span style="font-size: 12pt; font-weight: bold;">单例模式</span><span style="font-size: 12pt;">：只允许存在一个实例的模式</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="color: rgb(51, 51, 51); font-size: 12pt; font-family: 微软雅黑;">var Instance = (function(){</span></div><div><span style="color: rgb(51, 51, 51); font-size: 12pt; font-family: 微软雅黑;">    var obj;</span></div><div><span style="color: rgb(51, 51, 51); font-size: 12pt; font-family: 微软雅黑;">    return function(){</span></div><div><span style="color: rgb(51, 51, 51); font-size: 12pt; font-family: 微软雅黑;">        if(obj === undefined) obj = new Date();</span></div><div><span style="color: rgb(51, 51, 51); font-size: 12pt; font-family: 微软雅黑;">        return obj;</span></div><div><span style="color: rgb(51, 51, 51); font-size: 12pt; font-family: 微软雅黑;">    }</span></div><div><span style="color: rgb(51, 51, 51); font-size: 12pt; font-family: 微软雅黑;">})();</span></div><div><span style="color: rgb(51, 51, 51); font-size: 12pt; font-family: 微软雅黑;">var ibs = Instance();</span></div></div><div><br/></div><div><br/></div><div><span style="font-size: 12pt; font-weight: bold;">观察者模式</span></div><div><span style="font-size: 12pt;">     又称发布订阅者模式，经典案例：事件监听，一个元素同时监听多个同类型事件，元素对象即为发布者，每一个事件处理函数即为订阅者。</span></div><div><br clear="none"/></div><div><br/></div><div><span style="font-size: 12pt; font-weight: bold;">策略模式</span></div><div><span style="font-size: 12pt;">     策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换，从而避免很多if语句，曾经学过最简单的策略模式雏形就是使用数组的方式解决传入数字得到对应星期几问题的算法。</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">比如公司的年终奖是根据员工的工资和绩效来考核的，绩效为A的人，年终奖为工资的4倍，绩效为B的人，年终奖为工资的3倍，绩效为C的人，年终奖为工资的2倍</span></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">var obj = {</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    &quot;A&quot;: function(salary) {</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">        return salary * 4;</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    },</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    &quot;B&quot; : function(salary) {</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">        return salary * 3;</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    },</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    &quot;C&quot; : function(salary) {</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">        return salary * 2;</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    }</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">};</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">var calculateBouns =function(level,salary) {</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    return obj[level](salary);</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">};</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">console.log(calculateBouns('A',10000)); // 40000</span></div></div><div><br/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;"><span style="font-size: 12pt; font-weight: bold;">代理模式</span></span></div><div><span style="font-size: 12pt; font-weight: bold;"> </span><span style="font-size: 12pt;">代理模式（Proxy），为其他对象提供一种代理以控制对这个对象的访问，为了不暴露执行对象的部分代码</span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//三个对象</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//用户委托快捷方式打开exe</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//为了不暴露执行对象的部分代码</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//男孩委托快递小哥给女孩送礼物</span></div><div><br clear="none" style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">var girl = function(name){</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    this.name = name;</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">}</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">//隐藏复杂，不愿意修改的的方法</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">var boy = function(girl){</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    this.girl = girl;</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    this.send = function(gift){</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">        alert(&quot;你好：&quot;+this.girl.name+&quot;,给你一个&quot;+gift);</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    }</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">} </span></div><div><br clear="none" style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">var proxyBro = function(girl){</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    this.send = function(gift){</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">        new boy(girl).send(gift);</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">    }</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">}</span></div><div><br clear="none" style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);"/></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">var pro = new proxyBro(new girl(&quot;Lisa&quot;));</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">pro.send(&quot;么么哒&quot;);</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: rgb(51, 51, 51);">pro.send(&quot;玫瑰花&quot;);</span></div></div><div><br/></div><div><span style="font-size: 14pt;"><br/></span></div><div><span style="font-size: 13px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(246, 244, 240);"><br/></span></div></span>
</div></body></html> 